import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from '../button/CustomButton'

export default function TipPrompt(props) {
  const {
    onCancel, onConfirm, confirmText, cancelText, titleText, contentText, params
  } = props
  this.onCancel = () => {
    onCancel && onCancel()
  }
  this.onConfirm = () => {
    onConfirm && onConfirm(params)
  }
  return (
    <View style={styles.tipPromptView}>
      <Text style={styles.titleLabel}>{titleText}</Text>
      {contentText && <Text style={styles.tipContent}>{contentText}</Text>}
      {props.children}
      {cancelText && <CustomButton style={styles.cancelBtnView} onPress={this.onCancel}>
        <Text style={styles.cancelText}>{cancelText}</Text>
      </CustomButton>}
      {confirmText && <CustomButton style={styles.confirmView} onPress={this.onConfirm}>
        <Text style={styles.confirmText}>{confirmText}</Text>
      </CustomButton>}
    </View>
  )
}

TipPrompt.propTypes = {
  children: PropTypes.node,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  confirmText: PropTypes.string,
  cancelText: PropTypes.string,
  titleText: PropTypes.string,
  contentText: PropTypes.string
}
TipPrompt.defaultProps = {
  titleText: '温馨提示',
  cancelText: '取消',
  confirmText: '确定'
}

const styles = StyleSheet.create({
  tipPromptView: {
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignItems: 'center'
  },
  titleLabel: {
    color: '#444444',
    fontSize: ScaleT(33),
    fontWeight: '300',
    marginTop: ScaleS(27)
  },
  tipContent: {
    color: '#444444',
    fontSize: ScaleT(18),
    fontWeight: '500',
    marginVertical: ScaleS(52),
    paddingHorizontal: ScaleS(20),
    textAlign: 'center'
  },
  cancelBtnView: {
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(216,216,216,0.5)',
    borderRadius: ScaleS(10)
  },
  cancelText: {
    color: '#999999',
    fontSize: ScaleT(15),
    fontWeight: '600'
  },
  confirmView: {
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
    borderRadius: ScaleS(10),
    marginTop: ScaleS(12),
    marginBottom: ScaleS(26)
  },
  confirmText: {
    color: '#FFFFFF',
    fontSize: ScaleT(15),
    fontWeight: '600'
  }
})
